<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>爱鲜蜂</title>
    <style>
      *{
        padding: 0;
        margin: 0;
      }
      ul,li,ol{
        list-style: none;
      }
      a{
        text-decoration: none;
      }
      #tabBar{
        width: 100%;
        height: 1.875rem;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: rgba(246,246,246,.95);
        display: flex;
        align-items: center;
      }
      #tabBar>div{
        width: 25%;
        height: 80%;
        text-align: center;
      }
      #tabBar a{
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
      }
      #tabBar div p{
        width: 0.75rem;
        height: 0.75rem;
        background-size: 100% 100%;
      }
      #home p{
        background: url("data/img/homePoint.png") 50% 50% no-repeat;
      }
      #market p{
        background: url("data/img/market.png") 50% 50% no-repeat;
      }
      #shopCart p{
        background: url("data/img/cart.png") 50% 50% no-repeat;
      }
      #mine p{
        background: url("data/img/mine.png") 50% 50% no-repeat;
      }
      #tabBar div span{
        font-size: 0.375rem;
        color: #777;
      }
    </style>
    <script type="text/javascript" src="libs/jquery.js"></script>
    <script type="text/javascript" src="libs/require.js" async="async" defer data-main="main.js"></script>
    <script type="text/javascript" src="libs/flexible.js"></script>
  </head>
  <body>
    <div id="content">

    </div>
    <nav id="tabBar">
      <div id="home">
        <a href="#home">
          <p></p>
          <span>
            首页
          </span>
        </a>
      </div>
      <div id="market">
        <a href="#market">
          <p></p>
          <span>
            闪送超市
          </span>
        </a>
      </div>
      <div id="shopCart">
        <a href="#shopCart">
          <p></p>
          <span>
            购物车
          </span>
        </a>
      </div>
      <div id="mine">
        <a href="#mine">
          <p></p>
          <span>
            我的
          </span>
        </a>
      </div>
    </nav>
  </body>
  <!--tabBar切换-->
  <script type="text/javascript">
    $("#tabBar").on("click","div",function (e) {
//        $("p").css("background-image","data/img/cart.png");
    });
  </script>
</html>
